<template>
	<view class="activity-list__item">
		<view class="activity-list__item-value" @tap="jumpDetail(item)">
			<view class="icon">
				<image :src="item.icon"></image>
				<view class="point" v-if="item.status == 0"></view>
			</view>
			<view class="b">
				<view class="t">
					<view class="tit">{{ item.title }}</view>
					<view class="time">{{ item.createTime | newsActivity }}</view>
				</view>
				<view class="v">
					<view v-html="item.content"></view>
				</view>
				<view class="activity-list__item-more">
					<view>查看详情</view>
					<text class="iconfont icon-xiayiye"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import LoadMore from '@/components/LoadMore';

export default {
	data() {
		return {};
	},
	components: { LoadMore },
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	mounted() {},

	methods: {
		jumpDetail(e) {
			this.$Router.push({
				path: '/pages/news/detail',
				query: {
					id: e.id
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.activity-list {
	margin-top: 40rpx;
	&__item {
		border-bottom: 2rpx solid #ebebeb;
		padding: 20rpx 0;
		&-value {
			@include flexBox(space-between, null);
			.icon {
				width: 72rpx;
				height: 72rpx;
				margin-right: 30rpx;
				position: relative;
				image {
					max-width: 100%;
					height: 100%;
					border-radius: 50%;;
				}
				.point {
					width: 15rpx;
					height: 15rpx;
					border-radius: 50%;
					background: #f70114;
					position: absolute;
					top: 0;
					right: 0;
				}
			}
			.b{
				flex: 1;
			}
			.t {
				color: #171717;
				font-size: 30rpx;
				@include flexBox(space-between, null);
				.tit {
					@include ellipsis(1);
					width: 300rpx;
				}
				.time {
					color: #8f8f8f;
					font-size: 24rpx;
					@include ellipsis(1);
				}
			}
			.v {
				font-size: 28rpx;
				color: #8f8f8f;
				@include ellipsis(2);
				margin-top: 14rpx;
			}
			.iconfont {
				font-size: 26rpx;
				color: #8f8f8f;
			}
		}
		&-more {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #818181;
			@include flexBox(space-between, null);
		}
	}
	&__item:last-child {
		border: none;
	}
}
</style>
